<script lang="ts" setup>
import { useLocale } from '@/locale/locale';
import { RouteMap, useRouter } from '@/router';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { changePrePayInfo, createOrder, getPreOrderDetail, orderCouponList } from '@/api/car';
import { useAuthStore } from '@/store/auth';
import { usePopupStore } from '@/store/popup';
import AptCarUseNotice from '@/components/apt-car-use-notice/apt-car-use-notice.vue';
import { payOrder } from '@/api/payment';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const bottomZIndex = ref(10);
const popupStore = usePopupStore();
const authStore = useAuthStore();
const router = useRouter();
const carPackageTipsRef = ref();
const carUseNoticeRef = ref();
const flightNumber = ref('');
const useCouponNum = ref(0);
const couponList = ref<any[]>([]);
const pricePopupRef = ref();
const pricePopupOpen = ref(false);
const chooseBalance = ref(false);
const preOrderSn = ref('');
const bookingInfo = ref<any>({});
const serviceInfo = ref<any>({});
const innnInfo = ref<any>({});
const additionalService = ref<any>({});
const cancelInfo = ref<any>({});
const oldChildSeatNum = ref(0);
const payInfo = ref<any>({
  payModel: 3,
  memberBalance: 0,
  serviceAmount: 0,
  allAmount: 0,
  pickUpSign: {
    isChoose: false,
    amount: 0
  },
  childrenSeatAdd: {
    num: 0,
    amount: 0
  },
  extraPackage: {
    num: 0,
    amount: 0
  },
  score: 0,
  balance: {
    amount: 0
  },
  third: {
    amount: 0
  },
  coupon: {
    couponAmount: 0,
    couponName: '',
    couponId: 0
  }
});
const bookerInfo = ref({
  name: '',
  phoneArea: authStore.loginForm.countryPrefix,
  phone: '',
  email: '',
  remark: ''
});
const emergencyInfo = ref({
  name: '',
  phoneArea: authStore.loginForm.countryPrefix,
  phone: ''
});

const changeBookerPhoneArea = (e: string) => {
  bookerInfo.value.phoneArea = e;
};

const changeEmergencyPhoneArea = (e: string) => {
  emergencyInfo.value.phoneArea = e;
};

defineExpose({
  changeBookerPhoneArea,
  changeEmergencyPhoneArea
});

function openPricePopup() {
  bottomZIndex.value = 9999;
  pricePopupOpen.value = !pricePopupOpen.value;
  if (pricePopupOpen.value) {
    pricePopupRef.value?.open();
  } else {
    pricePopupRef.value?.close();
  }
}

async function handleChoosePickUpSign() {
  payInfo.value.pickUpSign.isChoose = !payInfo.value.pickUpSign.isChoose;
  payInfo.value.coupon.couponId = 0;
  await handleChangePrice();
  await getOrderCouponList();
}

async function handleChangeChildSeatNum(e: number) {
  payInfo.value.childrenSeatAdd.num = e;
  payInfo.value.coupon.couponId = 0;
  if (await handleChangePrice()) {
    oldChildSeatNum.value = e;
    await getOrderCouponList();
  } else {
    payInfo.value.childrenSeatAdd.num = oldChildSeatNum.value;
  }
}

async function handleChangeExtraPackageNum(e: number) {
  payInfo.value.extraPackage.num = e;
  payInfo.value.coupon.couponId = 0;
  await handleChangePrice();
  await getOrderCouponList();
}

function openCouponPopup() {
  if (useCouponNum.value <= 0) {
    return false;
  }
  bottomZIndex.value = 10;
  popupStore.openCouponPicker();
}

async function handleCouponUpdate(id: number) {
  payInfo.value.coupon.couponId = id;
  await handleChangePrice();
}

function handleClosePricePopup() {
  pricePopupOpen.value = false;
  pricePopupRef.value?.close();
}

function handleOpenCarPackageTips() {
  bottomZIndex.value = 10;
  carPackageTipsRef.value.open();
}

async function getPreOrderInfo() {
  const res = await getPreOrderDetail(preOrderSn.value);
  if (res.code == 0) {
    bookingInfo.value = res.data.bookingInfo;
    serviceInfo.value = res.data.serviceInfo ? res.data.serviceInfo : {};
    innnInfo.value = res.data.innnInfo ? res.data.innnInfo : {};
    additionalService.value = res.data.additionalService ? res.data.additionalService : {};
    cancelInfo.value = res.data.cancelInfo ? res.data.cancelInfo : {};
    payInfo.value = res.data.payInfo;
    bookerInfo.value = {
      name: res.data.memberInfo.fullName,
      phoneArea: res.data.memberInfo.phoneArea,
      phone: res.data.memberInfo.phone,
      email: res.data.memberInfo.mail,
      remark: ''
    };
  } else {
    uni.navigateBack();
  }
}

async function getOrderCouponList() {
  let initUseCouponNum = 0;
  const res = await orderCouponList(preOrderSn.value);
  if (res.code == 0) {
    couponList.value = res.data.list;
    res.data.list.forEach((item: any) => {
      if (item.use) {
        initUseCouponNum++;
      }
    });
  }
  useCouponNum.value = initUseCouponNum;
}

// 积分抵扣
async function handlePointsUpdate(e: any) {
  bottomZIndex.value = 10;
  chooseBalance.value = e.detail.value;
  await handleChangePrice();
  if (e.detail.value) {
    popupStore.openPointPicker();
  }
}

function handleUseNoticePopup() {
  handleClosePricePopup();
  if (!flightNumber.value) {
    uni.showToast({
      title: t('TransferEnterFightNumber'),
      icon: 'none'
    });
    return;
  }
  if (!bookerInfo.value.name) {
    uni.showToast({
      title: t('LCKey_yourFullName'),
      icon: 'none'
    });
    return;
  }
  if (!bookerInfo.value.phone) {
    uni.showToast({
      title: t('LCKey_mobileInputPlaceholder'),
      icon: 'none'
    });
    return;
  }
  if (bookingInfo.value.orderType == 'CRS') {
    bottomZIndex.value = 10;
    popupStore.openCarUseNotice();
  } else {
    submitOrder();
  }
}

async function submitOrder() {
  const payload: any = {
    preOrderSn: preOrderSn.value,
    bookingName: bookerInfo.value.name,
    bookingPhoneArea: bookerInfo.value.phoneArea,
    bookingPhone: bookerInfo.value.phone,
    bookingEmail: bookerInfo.value.email,
    desc: bookerInfo.value.remark,
    flightNumber: flightNumber.value,
    emergencyName: emergencyInfo.value.name,
    emergencyPhoneArea: emergencyInfo.value.phoneArea,
    emergencyMobile: emergencyInfo.value.phone
  };
  const res = await createOrder(payload);
  if (res.code == 0) {
    if (res.data.payModel === 1) {
      payOrder(res.data.orderSn).then(() => {
        router.to(RouteMap.orders, { tab: 'car' }, true);
      });
    } else {
      router.to(
        RouteMap.payment,
        {
          id: res.data.orderSn,
          amount: res.data.thirdPay.amount,
          createTime: res.data.createOrderTime,
          countdown: Math.abs(res.data.expirationTime),
          from: 'car'
        },
        true
      );
    }
  } else {
    uni.showToast({
      title: res.message,
      icon: 'none'
    });
    return;
  }
}

async function handleChangePrice() {
  const payload: any = {
    preOrderSn: preOrderSn.value,
    isPickUpSign: bookingInfo.value.orderType == 'INNN' ? false : payInfo.value.pickUpSign.isChoose,
    childrenSeatAddNum:
      bookingInfo.value.orderType == 'INNN' ? 0 : payInfo.value.childrenSeatAdd.num,
    extraPackageNum: bookingInfo.value.orderType == 'INNN' ? payInfo.value.extraPackage.num : 0,
    couponId: payInfo.value.coupon.couponId,
    isBalance: chooseBalance.value
  };
  const res = await changePrePayInfo(payload);
  if (res.code == 0) {
    payInfo.value = res.data.payInfo;
    return true;
  } else {
    return false;
  }
}

onLoad(async (options) => {
  preOrderSn.value = options!.preOrderSn;

  await getPreOrderInfo();
  await getOrderCouponList();
});
</script>

<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    :title="t('TransferFillInTheOrder')"
    fixed
    left-icon="left"
    status-bar
    @click-left="router.back"
  />
  <view class="car-checkout-contain">
    <view class="car-checkout-contain-top">
      <view v-if="bookingInfo.orderType == 'CRS'" class="car-checkout-contain-top-crs-bg">
        {{ t('TransferStayOfficial') }}
      </view>
      <view v-else-if="bookingInfo.orderType == 'INNN'" class="car-checkout-contain-top-innn-bg">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_innn.png"
        />
      </view>
      <view class="car-checkout-contain-top-title">
        {{
          bookingInfo.serviceType == 'PICKUP' ? t('TransferPickAirport') : t('TransferOrderPickCar')
        }}
      </view>
      <view class="car-checkout-contain-top-address">
        <view class="car-checkout-contain-top-address-item">
          <view class="car-checkout-contain-top-address-item-top">
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_start.png"
            />
            <view>{{ bookingInfo.startAddressName }}</view>
          </view>
          <view class="car-checkout-contain-top-address-item-line"></view>
        </view>
        <view class="car-checkout-contain-top-address-item">
          <view class="car-checkout-contain-top-address-item-top">
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_end.png"
            />
            <view>{{ bookingInfo.endAddressName }}</view>
          </view>
        </view>
      </view>
      <view class="car-checkout-contain-top-info">
        <view class="car-checkout-contain-top-info-time">
          {{ t('TransferCarTimeInfo', { date: bookingInfo.date, time: bookingInfo.time }) }}
        </view>
        <view class="car-checkout-contain-top-info-car">
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_car.png"
          />
          <text>
            {{
              bookingInfo.orderType == 'CRS'
                ? serviceInfo.carTypeName
                : t('TransferCarInnnPackageMsg')
            }}
          </text>
          <image
            v-if="bookingInfo.orderType == 'CRS'"
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_people.png"
          />
          <text v-if="bookingInfo.orderType == 'CRS'">{{ serviceInfo.passengerNum }}</text>
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_package.png"
          />
          <text class="info">
            {{
              bookingInfo.orderType == 'CRS'
                ? serviceInfo.maxPackageNum
                : t('TransferCarInnnPackageNum', { number: innnInfo.freePackageNum })
            }}
          </text>
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_tips.png"
            @click="handleOpenCarPackageTips"
          />
        </view>
      </view>
      <view class="car-checkout-contain-top-cancel">
        {{ t('LRKey_cancelOrderTip', { date: cancelInfo.freeCancelDate }) }}
      </view>
    </view>
    <view class="car-checkout-contain-airline">
      <view class="car-checkout-contain-airline-title">
        {{ t('TransferFlightInformation') }}
        <text>{{ t('TransferRequired') }}</text>
      </view>
      <view class="car-checkout-contain-airline-input">
        <view>{{ t('TransferFlightNumber') }}</view>
        <input
          v-model="flightNumber"
          :placeholder="t('TransferEnterFightNumber')"
          placeholder-class="placeholder"
          type="text"
        />
      </view>
    </view>
    <view class="car-checkout-contain-order">
      <view class="car-checkout-contain-order-title">
        {{ t('LRKey_reservationDetail') }}
        <text>{{ t('TransferRequired') }}</text>
      </view>
      <view class="car-checkout-contain-order-item">
        <view class="car-checkout-contain-order-item-v1">{{ t('TransferPassengerName') }}</view>
        <view class="car-checkout-contain-order-item-v2">
          <input
            v-model="bookerInfo.name"
            :placeholder="t('TransferPassengerName')"
            placeholder-class="placeholder"
            type="text"
          />
        </view>
      </view>
      <view class="car-checkout-contain-order-item">
        <view class="car-checkout-contain-order-item-v1">{{ t('LCKey_mobile') }}</view>
        <view class="car-checkout-contain-order-item-v2">
          <view
            @click="
              router.to(RouteMap.countries, { type: 'carBooker', code: bookerInfo.phoneArea })
            "
          >
            {{ bookerInfo.phoneArea }}
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_arrow_down.png"
            />
          </view>
          <input
            v-model="bookerInfo.phone"
            :placeholder="t('LCKey_mobileInputPlaceholder')"
            placeholder-class="placeholder"
            type="text"
          />
        </view>
      </view>
      <view class="car-checkout-contain-order-item">
        <view class="car-checkout-contain-order-item-v1">{{ t('LCKey_email') }}</view>
        <view class="car-checkout-contain-order-item-v2">
          <input
            v-model="bookerInfo.email"
            :placeholder="t('LCKey_emailInputPlaceholder')"
            placeholder-class="placeholder"
            type="text"
          />
        </view>
      </view>
      <view class="car-checkout-contain-order-item">
        <view class="car-checkout-contain-order-item-v1">{{ t('LCKey_note') }}</view>
        <view class="car-checkout-contain-order-item-v2">
          <input
            v-model="bookerInfo.remark"
            :placeholder="t('LCKey_Yourmessage')"
            placeholder-class="placeholder"
            type="text"
          />
        </view>
      </view>
    </view>
    <view v-if="bookingInfo.orderType == 'CRS'" class="car-checkout-contain-emergency">
      <view class="car-checkout-contain-emergency-title">{{ t('TransferEmergencyContact') }}</view>
      <view class="car-checkout-contain-emergency-subtitle">{{ t('TransferContactMsg') }}</view>
      <view class="car-checkout-contain-emergency-item">
        <view class="car-checkout-contain-emergency-item-v1">{{ t('TransferContacts') }}</view>
        <view class="car-checkout-contain-emergency-item-v2">
          <input
            v-model="emergencyInfo.name"
            :placeholder="t('TransferContactsInfo')"
            placeholder-class="placeholder"
            type="text"
          />
        </view>
      </view>
      <view class="car-checkout-contain-emergency-item">
        <view class="car-checkout-contain-emergency-item-v1">{{ t('LCKey_mobile') }}</view>
        <view class="car-checkout-contain-emergency-item-v2">
          <view
            @click="
              router.to(RouteMap.countries, { type: 'carEmergency', code: emergencyInfo.phoneArea })
            "
          >
            {{ emergencyInfo.phoneArea }}
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_arrow_down.png"
            />
          </view>
          <input
            v-model="emergencyInfo.phone"
            :placeholder="t('LCKey_mobileInputPlaceholder')"
            placeholder-class="placeholder"
            type="text"
          />
        </view>
      </view>
    </view>
    <view class="car-checkout-contain-additional">
      <view class="car-checkout-contain-additional-title">{{ t('TransferAddServices') }}</view>
      <view v-if="bookingInfo.orderType == 'CRS'" class="car-checkout-contain-additional-item">
        <view class="car-checkout-contain-additional-item-l">
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_pickup.png"
          />
          <view class="car-checkout-contain-additional-item-l-v">
            <view class="car-checkout-contain-additional-item-l-v-v1">
              {{ t('TransferPickUp') }}
            </view>
            <view
              :class="additionalService.pickUpSign.isLimitTimeFree ? 'free' : ''"
              class="car-checkout-contain-additional-item-l-v-v2"
            >
              <text>
                {{
                  t('TransferProPriceTime', { price: additionalService.pickUpSign.price + 'JPY' })
                }}
              </text>
              <view v-if="additionalService.pickUpSign.isLimitTimeFree">
                {{ t('TransferLimitedTimeFree') }}
              </view>
            </view>
          </view>
        </view>
        <view class="car-checkout-contain-additional-item-r">
          <image
            :src="
              payInfo.pickUpSign.isChoose
                ? 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_choosed.png'
                : 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_unchoose.png'
            "
            @click="handleChoosePickUpSign"
          />
        </view>
      </view>
      <view v-if="bookingInfo.orderType == 'CRS'" class="car-checkout-contain-additional-item">
        <view class="car-checkout-contain-additional-item-l">
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_seat.png"
          />
          <view class="car-checkout-contain-additional-item-l-v">
            <view class="car-checkout-contain-additional-item-l-v-v1">
              {{ t('TransferChildSeat') }}
            </view>
            <view
              :class="additionalService.childrenSeatAdd.isLimitTimeFree ? 'free' : ''"
              class="car-checkout-contain-additional-item-l-v-v2"
            >
              <text>
                {{
                  t('TransferProPriceFix', {
                    price: additionalService.childrenSeatAdd.price + 'JPY'
                  })
                }}
              </text>
              <view v-if="additionalService.childrenSeatAdd.isLimitTimeFree">
                {{ t('TransferLimitedTimeFree') }}
              </view>
            </view>
          </view>
        </view>
        <view class="car-checkout-contain-additional-item-r">
          <apt-counter v-model="payInfo.childrenSeatAdd.num" @update="handleChangeChildSeatNum" />
        </view>
      </view>
      <view v-if="bookingInfo.orderType == 'INNN'" class="car-checkout-contain-additional-item">
        <view class="car-checkout-contain-additional-item-l">
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_seat.png"
          />
          <view class="car-checkout-contain-additional-item-l-v">
            <view class="car-checkout-contain-additional-item-l-v-v1">{{ t('TransfrExtra') }}</view>
            <view class="car-checkout-contain-additional-item-l-v-v2">
              <text>
                {{
                  t('TransfrInnnExtraPrice', {
                    price: additionalService.extraPackage.price + 'JPY'
                  })
                }}
              </text>
            </view>
          </view>
        </view>
        <view class="car-checkout-contain-additional-item-r">
          <apt-counter v-model="payInfo.extraPackage.num" @update="handleChangeExtraPackageNum" />
        </view>
      </view>
      <view v-if="bookingInfo.orderType == 'CRS'" class="car-checkout-contain-additional-tips">
        {{ t('TransferProMsg1') }}
      </view>
      <view
        v-else-if="bookingInfo.orderType == 'INNN'"
        class="car-checkout-contain-additional-tips"
      >
        {{ t('TransfrInnnCarMsg') }}
      </view>
    </view>
    <view v-if="bookingInfo.orderType == 'CRS'" class="car-checkout-contain-discount">
      <view class="car-checkout-contain-discount-title">{{ t('LRKey_orderDiscount') }}</view>
      <view class="car-checkout-contain-discount-item">
        <view class="car-checkout-contain-discount-item-v1">{{ t('LRKey_coupon') }}</view>
        <view class="car-checkout-contain-discount-item-v2" @click="openCouponPopup">
          <view v-if="useCouponNum <= 0" class="no">{{ t('LRKey_nonAvailableCoupon') }}</view>
          <view v-else-if="useCouponNum > 0">
            {{
              payInfo.coupon.couponId > 0
                ? payInfo.coupon.couponName
                : t('LRKey_availableCouponX', { number: useCouponNum })
            }}
          </view>
          <image v-if="useCouponNum > 0" src="/static/icon_arrow_right.png" />
        </view>
      </view>
      <view class="car-checkout-contain-discount-item">
        <view class="car-checkout-contain-discount-item-v1">{{ t('LRKey_scoreRedemption') }}</view>
        <view class="car-checkout-contain-discount-item-v2">
          <view v-if="payInfo.score <= 0" class="no">{{ t('LRKey_nonScoreRedemption') }}</view>
          <view v-else-if="payInfo.score > 0">{{ t('LRKey_pointsAvailableForRedemption') }}</view>
          <switch
            v-if="payInfo.score > 0"
            :checked="chooseBalance"
            color="#EC1D39"
            style="transform: scale(0.7)"
            @change="handlePointsUpdate"
          ></switch>
        </view>
      </view>
    </view>
  </view>
  <view :style="{ zIndex: bottomZIndex }" class="car-checkout-contain-bottom">
    <view class="car-checkout-contain-bottom-l">
      <text>{{ t('TransfeOrderTotal') }}</text>
      {{ payInfo.third.amount }}JPY
    </view>
    <view class="car-checkout-contain-bottom-r">
      <view @click="openPricePopup">
        {{ t('DiningPreOrderDetails') }}
        <image
          :src="
            pricePopupOpen
              ? 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_arrow_down1.png'
              : 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_arrow_up.png'
          "
        />
      </view>
      <view @click="handleUseNoticePopup">{{ t('LHTKey_reservationNow') }}</view>
    </view>
  </view>
  <apt-car-package-tips ref="carPackageTipsRef" />

  <apt-coupon-picker
    from="car"
    :items="couponList"
    :selected="payInfo.coupon.couponId"
    confirmColor="#ff5a60"
    @update="handleCouponUpdate"
  />
  <apt-point-picker :points="payInfo.memberBalance" :score="payInfo.score" confirmColor="#ff5a60" />

  <apt-car-use-notice
    ref="carUseNoticeRef"
    :cancelPolicy="cancelInfo.cancelPolicy"
    :timeoutPrePrice="serviceInfo.timeoutPrePrice"
    :timeoutPreTime="serviceInfo.timeoutPreTime"
    :waitTime="serviceInfo.freeWaitTime"
    @submit="submitOrder"
  />

  <uni-popup
    ref="pricePopupRef"
    :safe-area="false"
    type="bottom"
    @maskClick="handleClosePricePopup"
  >
    <view class="car-checkout-price-popup">
      <view class="car-checkout-price-popup__head">
        <text class="text-xl text-primary font-medium">{{ t('DiningPreOrderPriceDetails') }}</text>
        <view class="car-checkout-price-popup__close-btn" @click.stop="handleClosePricePopup">
          <image class="w-full h-full" src="/static/icon_close.png" />
        </view>
      </view>
      <view class="car-checkout-price-popup__body">
        <view class="car-checkout-price-contain">
          <view class="car-checkout-price-contain-item">
            <view class="car-checkout-price-contain-item-title">
              {{ t('DiningPreOrderBasiceExpenses') }}
            </view>
            <view class="car-checkout-price-contain-item-content">
              <view class="car-checkout-price-contain-item-content-v">
                <text class="car-checkout-price-contain-item-content-v-t1">
                  {{ t('TransferProUseCarPrice') }}
                </text>
                <text class="car-checkout-price-contain-item-content-v-t2">
                  {{ parseFloat(payInfo.serviceAmount) }}JPY
                </text>
              </view>
              <view
                v-if="bookingInfo.orderType == 'CRS' && payInfo.pickUpSign.isChoose"
                class="car-checkout-price-contain-item-content-v"
              >
                <text class="car-checkout-price-contain-item-content-v-t1">
                  {{ t('TransferProPickUpPrice') }}
                  <text v-if="additionalService.pickUpSign.isLimitTimeFree">
                    （{{ t('TransferLimitedTimeFree') }}）
                  </text>
                </text>
                <text
                  :class="additionalService.pickUpSign.isLimitTimeFree ? 'free' : ''"
                  class="car-checkout-price-contain-item-content-v-t2"
                >
                  {{ additionalService.pickUpSign.price }}JPY
                </text>
              </view>
              <view
                v-if="bookingInfo.orderType == 'CRS' && payInfo.childrenSeatAdd.num > 0"
                class="car-checkout-price-contain-item-content-v"
              >
                <text class="car-checkout-price-contain-item-content-v-t1">
                  {{ t('TransferProSeatPrice') }}
                  <text v-if="additionalService.childrenSeatAdd.isLimitTimeFree">
                    （{{ t('TransferLimitedTimeFree') }}）
                  </text>
                </text>
                <text
                  :class="additionalService.childrenSeatAdd.isLimitTimeFree ? 'free' : ''"
                  class="car-checkout-price-contain-item-content-v-t2"
                >
                  {{ additionalService.childrenSeatAdd.price }}JPY ×{{
                    payInfo.childrenSeatAdd.num
                  }}
                </text>
              </view>
              <view
                v-if="bookingInfo.orderType == 'INNN' && payInfo.extraPackage.num > 0"
                class="car-checkout-price-contain-item-content-v"
              >
                <text class="car-checkout-price-contain-item-content-v-t1">
                  {{ t('TransfrExtra') }}
                </text>
                <text class="car-checkout-price-contain-item-content-v-t2">
                  {{ additionalService.extraPackage.price }}JPY ×{{ payInfo.extraPackage.num }}
                </text>
              </view>
            </view>
          </view>
          <view v-if="bookingInfo.orderType == 'CRS'" class="car-checkout-price-contain-item">
            <view class="car-checkout-price-contain-item-title">
              {{ t('DiningPreOrderDiscountAmount') }}
            </view>
            <view class="car-checkout-price-contain-item-content">
              <view class="car-checkout-price-contain-item-content-v">
                <text class="car-checkout-price-contain-item-content-v-t1">
                  {{ t('LRKey_coupon') }}
                </text>
                <text class="car-checkout-price-contain-item-content-v-t2">
                  -{{ payInfo.coupon.couponAmount }}JPY
                </text>
              </view>
              <view class="car-checkout-price-contain-item-content-v">
                <text class="car-checkout-price-contain-item-content-v-t1">
                  {{ t('LRKey_scoreRedemption') }}
                </text>
                <text class="car-checkout-price-contain-item-content-v-t2">
                  -{{ payInfo.balance.amount }}JPY
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.car-checkout-contain {
  padding-bottom: 204rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 204rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 204rpx);

  &-top {
    position: relative;
    padding: 32rpx;
    background: #ffffff;

    &-crs-bg {
      position: absolute;
      top: 0;
      right: 32rpx;
      height: 92rpx;
      padding: 16rpx 16rpx 0;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 40rpx;
      background: url('https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_crs_bg.png')
        no-repeat 0 0 / 100% 100%;
    }

    &-innn-bg {
      position: absolute;
      top: 0;
      right: 32rpx;
      height: 92rpx;
      padding: 22rpx 16rpx 0;
      background: url('https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_innn_bg.png')
        no-repeat 0 0 / 100% 100%;

      image {
        display: block;
        width: 114rpx;
        height: 30rpx;
      }
    }

    &-title {
      font-weight: 500;
      font-size: 48rpx;
      color: #3d3d3d;
      line-height: 68rpx;
    }

    &-address {
      margin-top: 32rpx;

      &-item {
        position: relative;
        padding-bottom: 32rpx;

        &:last-child {
          padding-bottom: 0;
        }

        &-top {
          display: flex;
          align-items: flex-start;

          image {
            display: block;
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
            position: relative;
            margin-top: 4rpx;
            z-index: 1;
          }

          view {
            flex: 1;
            line-height: 40rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #3d3d3d;
          }
        }

        &-line {
          position: absolute;
          top: 36rpx;
          left: 15rpx;
          bottom: -10rpx;
          width: 2rpx;
          background: #e7e7e7;
        }
      }
    }

    &-info {
      margin-top: 20rpx;
      padding-left: 44rpx;

      &-time {
        font-weight: 400;
        font-size: 24rpx;
        color: #3d3d3d;
        line-height: 34rpx;
      }

      &-car {
        margin-top: 12rpx;
        display: flex;
        align-items: center;

        image {
          display: block;
          width: 24rpx;
          height: 24rpx;
        }

        text {
          margin-left: 12rpx;
          margin-right: 20rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #3d3d3d;
          line-height: 34rpx;

          &.info {
            margin-right: 8rpx;
          }
        }
      }
    }

    &-cancel {
      margin-top: 26rpx;
      background: #fff3ec;
      height: 64rpx;
      line-height: 64rpx;
      padding: 0 20rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #b84c16;
      border-radius: 6rpx;
    }
  }

  &-airline {
    margin-top: 20rpx;
    padding: 40rpx 32rpx 24rpx;
    background: #ffffff;

    &-title {
      font-weight: 500;
      font-size: 36rpx;
      color: #3d3d3d;
      line-height: 50rpx;
      display: flex;
      align-items: center;

      text {
        font-weight: 400;
        font-size: 24rpx;
        color: #d13820;
        line-height: 34rpx;
      }
    }

    &-input {
      display: flex;
      align-items: center;
      //margin-top: 40rpx;

      view {
        padding: 40rpx 0;
        font-weight: 500;
        font-size: 28rpx;
        color: #3d3d3d;
        line-height: 40rpx;
        width: 212rpx;
      }

      input {
        font-weight: 400;
        font-size: 28rpx;
        color: #3d3d3d;
        line-height: 40rpx;
        flex: 1;
        height: 120rpx;

        &.placeholder {
          color: #d8d8d8;
        }
      }
    }
  }

  &-order {
    padding: 40rpx 32rpx 26rpx;
    background: #ffffff;
    margin-top: 20rpx;

    &-title {
      font-weight: 500;
      font-size: 36rpx;
      color: #3d3d3d;
      line-height: 50rpx;
      display: flex;
      align-items: center;
      margin-bottom: 8rpx;

      text {
        font-weight: 400;
        font-size: 24rpx;
        color: #d13820;
        line-height: 34rpx;
      }
    }

    &-item {
      //padding: 32rpx 0;
      border-bottom: 1px solid #f4f4f4;
      display: flex;
      align-items: center;

      &:last-child {
        border-bottom: none;
      }

      &-v1 {
        padding: 32rpx 0;
        width: 212rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #3d3d3d;
        line-height: 40rpx;
      }

      &-v2 {
        flex: 1;
        display: flex;
        align-items: center;

        view {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 28rpx;
          color: #3d3d3d;
          line-height: 40rpx;

          image {
            display: block;
            width: 32rpx;
            height: 32rpx;
            margin-left: 2rpx;
            margin-right: 20rpx;
          }
        }

        input {
          font-weight: 400;
          font-size: 28rpx;
          color: #3d3d3d;
          line-height: 40rpx;
          flex: 1;
          height: 104rpx;

          &.placeholder {
            color: #d8d8d8;
          }
        }
      }
    }
  }

  &-emergency {
    padding: 40rpx 32rpx 26rpx;
    background: #ffffff;
    margin-top: 20rpx;

    &-title {
      font-weight: 500;
      font-size: 36rpx;
      color: #3d3d3d;
      line-height: 50rpx;
      display: flex;
      align-items: center;
      margin-bottom: 4rpx;
    }

    &-subtitle {
      font-weight: 400;
      font-size: 24rpx;
      color: #979797;
      line-height: 34rpx;
      margin-bottom: 8rpx;
    }

    &-item {
      //padding: 32rpx 0;
      border-bottom: 1px solid #f4f4f4;
      display: flex;
      align-items: center;

      &:last-child {
        border-bottom: none;
      }

      &-v1 {
        padding: 32rpx 0;
        width: 212rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #3d3d3d;
        line-height: 40rpx;
      }

      &-v2 {
        flex: 1;
        display: flex;
        align-items: center;

        view {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 28rpx;
          color: #3d3d3d;
          line-height: 40rpx;

          image {
            display: block;
            width: 32rpx;
            height: 32rpx;
            margin-left: 2rpx;
            margin-right: 20rpx;
          }
        }

        input {
          font-weight: 400;
          font-size: 28rpx;
          color: #3d3d3d;
          line-height: 40rpx;
          flex: 1;
          height: 104rpx;

          &.placeholder {
            color: #d8d8d8;
          }
        }
      }
    }
  }

  &-additional {
    padding: 40rpx 32rpx 32rpx;
    background: #ffffff;
    margin-top: 20rpx;

    &-title {
      font-weight: 500;
      font-size: 36rpx;
      color: #3d3d3d;
      line-height: 50rpx;
      margin-bottom: 8rpx;
    }

    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f4f4f4;
      padding: 32rpx 0;

      &:last-child {
        border-bottom: none;
      }

      &-l {
        display: flex;
        align-items: center;

        image {
          display: block;
          width: 48rpx;
          height: 48rpx;
        }

        &-v {
          margin-left: 42rpx;

          &-v1 {
            font-weight: 500;
            font-size: 28rpx;
            color: #3d3d3d;
            line-height: 40rpx;
          }

          &-v2 {
            display: flex;
            align-items: center;
            margin-top: 12rpx;

            text {
              font-weight: 500;
              font-size: 28rpx;
              color: #51668f;
              line-height: 40rpx;
            }

            &.free {
              text {
                text-decoration: line-through;
              }
            }

            view {
              margin-left: 16rpx;
              padding: 2rpx 8rpx;
              background: #d13820;
              border-radius: 4rpx;
              font-weight: 400;
              font-size: 20rpx;
              color: #ffffff;
              text-decoration: none;
            }
          }
        }
      }

      &-r {
        image {
          display: block;
          width: 48rpx;
          height: 48rpx;
        }
      }
    }

    &-tips {
      background: #fff3ec;
      padding: 14rpx 20rpx 18rpx;
      border-radius: 6rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #b84c16;
      line-height: 34rpx;
    }
  }

  &-discount {
    background: #ffffff;
    padding: 40rpx 32rpx;
    margin-top: 20rpx;

    &-title {
      font-weight: 500;
      font-size: 36rpx;
      color: #3d3d3d;
      line-height: 50rpx;
      margin-bottom: 8rpx;
    }

    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0;

      &-v1 {
        font-weight: 500;
        font-size: 28rpx;
        color: #3d3d3d;
        line-height: 40rpx;
      }

      &-v2 {
        display: flex;
        align-items: center;

        view {
          font-weight: 400;
          font-size: 28rpx;
          color: #ec1d39;
          line-height: 40rpx;

          &.no {
            color: #adaeb0;
          }
        }

        image {
          display: block;
          width: 32rpx;
          height: 32rpx;
          margin-left: 4rpx;
        }
      }
    }
  }

  &-bottom {
    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(99, 99, 99, 0.2);
    z-index: 10;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx 32rpx;
    padding-bottom: 16rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);

    &-l {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 36rpx;
      color: #d13820;
      line-height: 50rpx;

      text {
        font-weight: 400;
        font-size: 20rpx;
        color: #3d3d3d;
        line-height: 28rpx;
      }
    }

    &-r {
      display: flex;
      align-items: center;

      view {
        &:first-child {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 20rpx;
          color: #979797;
          line-height: 28rpx;
          margin-right: 6rpx;

          image {
            display: block;
            width: 32rpx;
            height: 32rpx;
          }
        }

        &:last-child {
          margin-left: 24rpx;
          padding: 0 32rpx;
          height: 72rpx;
          background: #ff5a60;
          border-radius: 8rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #ffffff;
          line-height: 72rpx;
        }
      }
    }
  }
}

.car-checkout-price-popup {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-top-left-radius: 28rpx;
  border-top-right-radius: 28rpx;
  padding-bottom: 104rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 104rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 104rpx);

  &__head {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 28rpx;
    padding-top: 44rpx;
  }

  &__close-btn {
    position: absolute;
    top: 56rpx;
    right: 26rpx;
    width: 28rpx;
    height: 28rpx;
  }

  &__body {
    flex: 1;
    padding: 0 24rpx;
  }
}

.car-checkout-price-contain {
  padding-bottom: 64rpx;

  &-item {
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }

    &-title {
      font-weight: 500;
      font-size: 28rpx;
      color: #3d3d3d;
      line-height: 40rpx;
    }

    &-content {
      &-v {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &-t1 {
          font-weight: 400;
          font-size: 24rpx;
          color: #979797;
          line-height: 34rpx;
        }

        &-t2 {
          font-weight: 600;
          font-size: 24rpx;
          color: #3d3d3d;
          line-height: 34rpx;

          &.free {
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
</style>
